<template>
  <div class="container">
    <default-header></default-header>
    <div>
      <img
        src="../../assets/img/home/42478293@2x.png"
        alt=""
        style="width: 100%"
      />
    </div>
    <div class="width1080 margin0auto">
      <h1 class="tac pt40">我们能为你做什么？</h1>
      <p class="tac fs16 color_666 mt10 pb40">
        {{ cate.abstract }}
      </p>
      <ul :style="{ height: ulHeight * 248 + 'px' }">
        <service-item
          v-for="(data, idx) in loop"
          :key="idx"
          :info="data"
          :style="getStyle(idx)"
        ></service-item>
      </ul>
    </div>
    <default-footer></default-footer>
  </div>
</template>

<script>
import DefaultHeader from "../../components/default-header";
import DefaultFooter from "../../components/default-footer";
import ServiceItem from "../../components/home/service/li-item";

export default {
  components: { ServiceItem, DefaultFooter, DefaultHeader },
  mixins: [],
  head() {
    return {
      title: this.cate.seo_title || this.cate.name || "我们的服务"
    };
  },
  computed: {
    length() {
      return this.loop.length;
    },
    ulHeight() {
      return Math.ceil(this.length / 4) / 2 + 0.5;
    }
  },
  async asyncData({ app, route }) {
    const path = route.path;
    const cate = await app.$cateService.detail(null, "tree", path, true);
    const ids = cate.children || [];
    const random = () => Math.floor(Math.random() * 4);
    const loop = [];
    for (let i = 0; i < ids.length; i++) {
      const item = ids[i];
      const { data } = await app.$newsService.list({
        cate_id: item.id,
        cache: true
      });
      const idx = random();
      for (let j = 0; j < 4; j++) {
        if (j === idx || data.length === 0)
          loop.push({
            id: item.id,
            name: item.name
          });
        else {
          const [news] = data.splice(0, 1);
          loop.push({ src: news.thumb, id: news.id });
        }
      }
    }
    return { loop, cate };
  },
  methods: {
    getStyle(idx) {
      const delta = 36;
      const width = 212;
      const floor = Math.floor(idx / 4);
      const start = idx % 8 <= 3 ? (width + delta) / 2 : 0;
      return {
        left: `${start + (width + delta) * (idx % 4)}px`,
        top: `${((width + delta) / 2) * floor}px`
      };
    }
  }
};
</script>
<style scoped lang="scss">
ul {
  position: relative;
  height: 300px;
}

li {
}
</style>
